<template>
    <div>
        <div class="crumbs">
            <el-breadcrumb separator="/">
                <el-breadcrumb-item><i class="el-url-lx-calendar"></i> 轮播图管理</el-breadcrumb-item>
                <el-breadcrumb-item>添加轮播图/修改轮播图</el-breadcrumb-item>
            </el-breadcrumb>
        </div>
        <div class="container">
            <el-form ref="form" :model="form" label-width="80px">
                <el-form-item label="标题">
                    <el-input v-model="form.title"></el-input>
                </el-form-item>
                <el-form-item label="描述">
                    <el-input v-model="form.description"></el-input>
                </el-form-item>
                <el-form-item label="图片">
                    <el-upload
                        action="http://127.0.0.1:7777/api/photo/app/uploadImg"
                        method="post"
                        enctype="multipart/form-data"
                        list-type="picture-card"
                        :on-preview="handlePictureCardPreview"
                        :on-success="photoSuccess"
                        :on-remove="removePhoto"
                        :file-list="photoList"
                    >
                        <i class="el-url-plus"></i>
                    </el-upload>
                    <el-dialog :visible.sync="dialogVisible">
                        <img width="100%" :src="dialogImageUrl" alt="" />
                    </el-dialog>
                </el-form-item>
                <el-form-item>
                    <el-button type="primary" @click="save">立即创建</el-button>
                </el-form-item>
            </el-form>
        </div>
    </div>
</template>
<script>
import { apiNoticeInserts, apiNoticeupdates } from '@/utils';
import { Notification } from 'element-ui';

export default {
    data() {
        return {
            form: {},
            photoList: [],
            dialogVisible: false,
            dialogImageUrl: '',
            uploadFlag: false
        };
    },
    created() {
        var userId = localStorage.getItem('user');
        console.log(userId);
        if (userId != null) {
            // this.form = JSON.parse(userId);
            console.log(this.form);
            let photo = {};
            // photo.name = this.form.url;
            // photo.url = this.form.url;
            this.photoList.push(photo);
            console.log(this.photoList);
        }
        if (this.$route.query.update && JSON.parse(this.$route.query.update)) {
            this.uploadFlag = true;
            this.form = JSON.parse(this.$route.query.update);
        }
    },
    methods: {
        photoSuccess(response) {
            if (response.code == 500) {
                Notification.error({
                    title: '上传失败，系统错误'
                });
            }
            this.form.url = response.data.url;
        },
        handlePictureCardPreview(file) {
            this.dialogVisible = true;
            if (this.form.url != '') {
                this.dialogImageUrl = this.form.url;
            } else {
                this.dialogImageUrl = file.url;
            }
        },
        removePhoto() {
            this.form.url = '';
        },
        save() {
            if (this.uploadFlag) {
                delete this.form.createTime;
                delete this.form.updateTime;
                apiNoticeupdates(this.form).then(res => {
                    console.log(res);
                    this.$message.success(res.data.msg);
                });
            } else {
                //直接保存用户
                this.form.id = 0;
                apiNoticeInserts(this.form).then(res => {
                    console.log(res);
                    this.$message.success(res.data.msg);
                });
            }
            this.$router.push('/swipers');
        }
    }
};
</script>
